{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import holoviews as hv\n",
    "from holoviews import opts\n",
    "\n",
    "from holoviews.plotting.links import DataLink\n",
    "\n",
    "hv.extension('bokeh')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This example demonstrates how to use a DataLink to join two elements displaying the same data, a choropleth of the Texas unemployment rate alongside a Table of the same data. By linking the two selecting a polygon will highlight it in the table and vice versa."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Declare data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.sampledata.us_counties import data as counties\n",
    "from bokeh.sampledata.unemployment import data as unemployment\n",
    "\n",
    "counties = [dict(county, Unemployment=unemployment[cid])\n",
    "            for cid, county in counties.items()\n",
    "            if county[\"state\"] == \"tx\"]\n",
    "\n",
    "county_data = [(county['detailed name'], county['Unemployment']) for county in counties]\n",
    "\n",
    "choropleth = hv.Polygons(counties, ['lons', 'lats'], [('detailed name', 'County'), 'Unemployment'], label='Texas Unemployment')\n",
    "table = hv.Table(county_data, [('detailed name', 'County'), 'Unemployment'])\n",
    "\n",
    "print(len(choropleth.data), len(table))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Declare Plot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As shown above the two elements have the same length meaning that they can be linked. Linking the data in this way allows cross-selecting, e.g. by selecting one or more rows in the ``Table`` we can see the polygon for the county highlight in the choropleth:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Link the choropleth and the table\n",
    "DataLink(choropleth, table)\n",
    "\n",
    "(choropleth + table).opts(\n",
    "    opts.Table(height=428),\n",
    "    opts.Polygons(width=500, height=500,  tools=['hover', 'tap'], xaxis=None, \n",
    "                  yaxis=None, color_index='Unemployment'))"
   ]
  }
 ],
 "metadata": {
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
